<template>
    <div class="wrapper">
        
        <!-- 第一版:静态 -->
        <!-- <div class="container" v-for="user in userList" :key="user.id">
            <div>用户名: admin</div>
            <div>个人介绍: 这个是管理员账号,请勿修改</div>
            <div class="content">
                <div>
                    <span>关联平台: </span>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weixin"></use>
                    </svg>
                </div>
                <div class="indent">账号: admin-wechat</div>
            </div>
        </div> -->

        <!--
            第二版:组件
            问题: 以后但凡我们新关联一个平台的时候,都需要去修改Userinfo这个组件
                    而且关联的平台过多的时候,此时 Userinfo 的代码会过长,不便于维护
        -->
        <!-- <Userinfo
            v-for="user in userList"
            :key="user.id"
            :user="user"
        ></Userinfo> -->

        <!--
            第三版:插槽
            把Userinfo组件中可变的内容使用插槽来渲染,之后Userinfo这个组件就不需要再动了
            但是之后但凡关联新的平台的时候,父组件 写 <Userinfo></Userinfo> 这个标签的时候
            里面的内容还是需要改很多
        -->
        <!-- <Userinfo
            v-for="user in userList"
            :key="user.id"
            :user="user"
            v-slot="{ accountJoin }"
        >
            <div class="content" v-if="accountJoin.wechat">
                <div>
                    <span>关联平台: </span>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weixin"></use>
                    </svg>
                </div>
                <div class="indent">账号: {{ accountJoin.wechat }}</div>
            </div>
            <div class="content" v-if="accountJoin.qq">
                <div>
                    <span>关联平台: </span>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-QQ"></use>
                    </svg>
                </div>
                <div class="indent">账号: {{ accountJoin.qq }}</div>
            </div>
            <div class="content" v-if="accountJoin.sina">
                <div>
                    <span>关联平台: </span>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xinlang"></use>
                    </svg>
                </div>
                <div class="indent">账号: {{ accountJoin.sina }}</div>
            </div>
        </Userinfo> -->
    
        <!--
            第四版: 把 父组件 写 <Userinfo></Userinfo> 这个标签的内容的时候
            里面的每一个平台的div封装成一个组件
            优势在哪:
                虽然之后每次关联新平台,父组件 写 <Userinfo></Userinfo> 这个标签的内容的时候
                也需要改,但是改的代码少了,父组件中的代码变得比较简洁,利于后期维护
            劣势:
                每次改动都需要手动引入组件,每次都需要改当前父组件
        -->
        <!-- <Userinfo
            v-for="user in userList"
            :key="user.id"
            :user="user"
            v-slot="{ accountJoin }"
        >
            <UWechat v-if="accountJoin.wechat" :accountJoin="accountJoin"></UWechat>
            <UQQ v-if="accountJoin.qq" :accountJoin="accountJoin"></UQQ>
            <USina v-if="accountJoin.sina" :accountJoin="accountJoin"></USina>
        </Userinfo> -->


        <!--
            第五版:
                1. 动态引入vue文件
                2. v-if 判断 动态渲染  ---------   但是数组的下标难以控制
        -->
        <!-- <Userinfo
            v-for="user in userList"
            :key="user.id"
            :user="user"
            v-slot="{ accountJoin }"
        >
            <component v-if="accountJoin.qq" :is="compList[0]" :accountJoin="accountJoin"></component>
            <component v-if="accountJoin.sina" :is="compList[1]" :accountJoin="accountJoin"></component>
            <component v-if="accountJoin.wechat" :is="compList[2]" :accountJoin="accountJoin"></component>
        </Userinfo> -->


        <!--
            第六版: 最终版
            用到了三个知识点:
            1. 插槽 - (第四版之前使用的都是插槽)
            2. 动态引入文件(这里的文件是可以自定义的)
                require.context() --- 这个方法是 webpack提供的
                功能:
                    动态获取文件夹中的文件
                参数:
                    参数1: 是文件夹名称(路径)
                    参数2: 布尔值,是否检索子文件夹
                    参数3: 正则,用来匹配文件
                返回值:
                    是个函数
                说明:
                    当调用这个方法的时候,webpack会去 参数1路径下检索文件,
                    在检索文件的过程中是否检索当前这个路径的 子路径由 参数2 决定
                    如果参数2 是false,那么检索子路径,如果参数2是true, 会检索子路径(子文件夹)
                    检索的文件类型由 参数3 的正则来进行匹配
                    得到的最终结果是一个函数,这个函数的所用是用来获取检索到的每个文件

                    同时这个函数有三个属性 resolve, keys, id, 我们关注 keys

                const context = require.context('./support', false, /.vue$/)

                context.keys() -- 得到一个检索文件夹下所有匹配到文件的路径组成的数组
                context.keys() -- ['./UQQ.vue', './USina.vue', './UWechat.vue', ]

                使用context,也就是使用 require.context() 这个方法返回的函数,调用一下这个函数,传参传文件路径,
                可以把这个文件当成一个模块获取到
                这个模块中,有default属性,default属性是组件

                const module = context('./UQQ.vue') --- 得到的就是检索的文件,被webpack处理成了一个模块
                
                const component = module.default --- 得到组件
            3. 动态渲染组件
                <component :is="compObj[accountJoin.flag]" :accountJoin="accountJoin"></component>
        -->
        <Userinfo
            v-for="user in userList"
            :key="user.id"
            :user="user"
            v-slot="{ accountJoin }"
        >
            <component :is="compObj[accountJoin.flag]" :accountJoin="accountJoin"></component>
        </Userinfo>
    </div>
</template>

<script>
import Userinfo from './components/Userinfo.vue'

// import UWechat from './support/UWechat.vue'
// import UQQ from './support/UQQ.vue'
// import USina from './support/USina.vue'

// require.context() 是 webpack中的api
// 参数一: 路径名称,检索参数一路劲下的所有文件
// 参数二: 布尔值,是否检索子文件夹,true代表检索,false代表不检索
// 参数三: 正则,匹配的文件格式
// 返回值: 函数,这个函数有三个属性 resolve, keys, id  我们关注 keys
const context = require.context('./support', false, /.vue$/);
console.log(context);
console.log( context.keys() );


// 打开看下打印
const obj = {};
context.keys().forEach(path => { // path是组件的路径
    console.log('路径', path)
    const comp = context(path); // 拿到每个组件
    console.log('模块', comp)
    console.log('组件', comp.default)
    // compList.push(comp.default); // 把每个组件添加到数组中
    obj[comp.default.name] = comp.default;
})
console.log(obj)

export default {
    name: "slotex",
    components: { Userinfo },
    // components: { Userinfo, UWechat, UQQ, USina },
    computed: {
        // compList() {
        //     const list = [];
        //     context.keys().forEach(path => { // path是组件的路径
        //         const comp = context(path); // 拿到每个组件
        //         list.push(comp.default); // 把每个组件添加到数组中
        //     })
        //     return list
        // }
        compObj() {
            const obj = {};
            context.keys().forEach(path => { // path是组件的路径
                const comp = context(path); // 拿到每个模块
                // comp.default  ---> 组件
                // comp.default.name  ---> 组件配置想中的name属性  UQQ、USina、UWechat
                obj[comp.default.name] = comp.default; // 把每个组件添加到对象中
            })
            return obj
        }
    },
    data() {
        return {
            userList: [
                {
                    id: 1001,
                    username: "admin",
                    intro: "这个是管理员账号,请勿修改",
                    accountJoin: {
                        flag: 'UWechat', // 这个flag必须和组件名一直
                        wechat: "admin-wechat"
                    },
                    createDate: 1645184446523
                },
                {
                    id: 1002,
                    username: "zhangsan",
                    intro: "一个乐观的开发者",
                    accountJoin: {
                        flag: 'UQQ', // 这个flag必须和组件名一直
                        qq: "465258674"
                    },
                    createDate: 1645182446523
                },
                {
                    id: 1003,
                    username: "lisi",
                    intro: "这一个沮丧的开发者",
                    accountJoin: {
                        flag: 'USina', // 这个flag必须和组件名一直
                        sina: "会飞的猪",
                        email: "huifeidezhu@163.com"
                    },
                    createDate: 1645144446523
                },
            ]
        }
    }
}
</script>

<style scoped>

</style>